<template>
	<view class="invite-confirm">
		<view class="box-warpper">
			<view class="box-header">
				<view class="exit"></view>
				<view class="title">邀请函</view>
				<view class="exit">
					<image :src="$IMAGE_BASE_URL + '/static/ic_exit.png'"></image>
				</view>
			</view>
			<view class="box-content">
				<view class="content">是否加入'{{ homeName }}'家庭</view>
				<view class="btn" :class="{'btn-disable': disabled}" @click="onConfirm">同意</view>
			</view>
		</view>
	</view>
</template>

<script>
	import UserService from '@/service/UserService.js';
	import * as HomeApi from '@/api/home/index.js';
	import * as LoginApi from '@/api/login/index.js';
	import {
		hideLoading,
		showInfo,
		showLoading
	} from '@/utils/ToastUtils';
	import {
		getCurrentPage
	} from '@/core/app'

	export default {
		data() {
			return {
				homeId: '',
				homeName: '',
				userId: '',
				disabled: false,
			};
		},
		onShow() {
			console.log("getCurrentPage().query", getCurrentPage().query);
			this.homeId = getCurrentPage().query.homeId;
			this.init();
		},
		methods: {
			async init() {
				try {
					showLoading();
					await UserService.wxLogin();
					console.log("UserService.userInfo", UserService.userInfo);
					const mobile = UserService.userInfo.mobile;
					const userId = UserService.userInfo.id;
					if(!mobile) {
						hideLoading();
						uni.navigateTo({
							url:'/pages/mine/personal'
						})
						return;
					}
					this.userId = userId;
					console.log("userId", userId);

					const homeInfoRes = await HomeApi.getHomeInfo(this.homeId);
					console.log("homeInfoRes", homeInfoRes);
					const homeInfo = homeInfoRes.obj;
					if (homeInfo.homeName) {
						this.homeName = homeInfo.homeName;
					}

					const membersRes = await LoginApi.homeMembers({
						homeId: this.homeId
					});
					console.log("membersRes", membersRes);
					const memberList = membersRes.obj;
					const index = memberList.findIndex(v => v.id == userId);
					console.log("index", index);
					if (index > -1) {
						this.disabled = true;
						showInfo("已是该家庭成员");
					}
				} catch (err) {
					console.log("init error", err);
				} finally {
					hideLoading();
				}
			},
			async onConfirm() {
				if(this.disabled) {
					showInfo("已是该家庭成员");
					return;
				}
				const param = {
					homeId: this.homeId,
					invitedUserId: this.userId,
				};
				console.log("onConfirm param", param);
				HomeApi.joinHome(param).then(res => {
					console.log("joinHome success", res);
					uni.reLaunch({
						url: '/pages/index/index'
					})
				}).catch(err => {
					console.log("joinHome error", err);
				})
			}
		}
	}
</script>

<style lang="scss">
	.invite-confirm {
		height: 100vh;
		background-color: #f4f6f8;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 0 45rpx;

		.box-warpper {
			width: 663rpx;
			height: 687rpx;
			border-radius: 30rpx;
			background-color: #FFFFFF;
			overflow: hidden;
			display: flex;
			flex-direction: column;
			box-shadow: 0 0 20rpx rgba(0, 0, 0, 0.1);

			.box-header {
				width: 100%;
				height: 122rpx;
				background: linear-gradient(to right, #a9eed5, #7ee2a4);
				display: flex;
				align-items: center;
				justify-content: space-between;

				.title {
					font-family: SourceHanSansCN;
					font-size: 36rpx;
					font-weight: bold;
					color: #131313;
					letter-spacing: 10rpx;
				}

				.exit {
					width: 100rpx;
					height: 100rpx;
					display: flex;
					align-items: center;
					justify-content: center;

					image {
						width: 30%;
						height: 30%;
					}
				}
			}

			.box-content {
				flex: 1;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;

				.content {
					font-family: SourceHanSansCN;
					font-size: 60rpx;
					color: #131313;
					margin-bottom: 120rpx;
				}

				.btn {
					width: 440rpx;
					height: 98rpx;
					background-color: #0dd30c;
					border-radius: 98rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					font-family: SourceHanSansCN;
					font-size: 36rpx;
					color: #FFFFFF;
					box-shadow: 0 0 20rpx rgba(0, 0, 0, 0.1);
				}
				
				.btn-disable {
					background-color: #BBBBBB;
				}

			}

		}

	}
</style>